<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1400px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-card class="form-card txnInfo-card">
        <el-row>
          <el-col :span="6">
            <el-form-item label="批次序列号" prop="batchNumber">
              <el-input v-model="formData.batchNumber" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报文标识号" prop="messageIdentNum">
              <el-input v-model="formData.messageIdentNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务类型" prop="businessType">
              <el-select v-model="formData.businessType" disabled placeholder="">
                <el-option label="薪资报酬" value="1"></el-option>
                <el-option label="退汇" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发起参与机构" prop="initiatePart">
              <el-input v-model="formData.initiatePart" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="发起参与机构名称" prop="initiatePartName">
              <el-input v-model="formData.initiatePartName" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发起直接参与机构" prop="initiateDirectPart">
              <el-input v-model="formData.initiateDirectPart" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收参与机构" prop="acceptPart">
              <el-input v-model="formData.acceptPart" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收参与机构名称" prop="acceptPartName">
              <el-input v-model="formData.acceptPartName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="接收直接参与机构" prop="acceptDirectPart">
              <el-input v-model="formData.acceptDirectPart" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款人账号" prop="payerAccount">
              <el-input v-model="formData.payerAccount" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款人名称" prop="payerName">
              <el-input v-model="formData.payerName" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款行行号" prop="payBankNum">
              <el-input v-model="formData.payBankNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="付款行行名" prop="payBankName">
              <el-input v-model="formData.payBankName" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款清算行行号" prop="payLiqBankNum">
              <el-input v-model="formData.payLiqBankNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收款清算行行号" prop="AccLiqBankNum">
              <el-input v-model="formData.AccLiqBankNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总金额" prop="amountMoney">
              <el-input v-model="formData.amountMoney" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="收款人数目" prop="payeeNum">
              <el-input v-model="formData.payeeNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同（协议）号" prop="contractNum">
              <el-input v-model="formData.contractNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="统一社会信用代码" prop="unifyCreditCode">
              <el-input v-model="formData.unifyCreditCode" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="校验标识" prop="checkMark">
              <el-input v-model="formData.checkMark" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="客户参考号" prop="customerReferenceNu">
              <el-input v-model="formData.customerReferenceNu" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="NPC处理状态" prop="transactionClass">
              <el-select v-model="formData.transactionClass" placeholder="" disabled>
                <el-option label="已转发" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="NPC处理日期" prop="NPCProcesseDate">
              <el-date-picker
                v-model="formData.NPCProcesseDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                disabled
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="回执期限" prop="receiptDeadline">
              <el-input v-model="formData.receiptDeadline" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="状态更新时间" prop="statusUpdateTime">
              <el-date-picker
                v-model="formData.statusUpdateTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder=""
                disabled
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="剩余回执期限" prop="leaveReceiptDeadline">
              <el-input v-model="formData.leaveReceiptDeadline" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="转发付款方日期" prop="transpondPayDate">
              <el-date-picker
                v-model="formData.transpondPayDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                disabled
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="记账账号" prop="accountNum">
              <el-input v-model="formData.accountNum" placeholder="请输入记账账号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="记账名称" prop="accountName">
              <el-input v-model="formData.accountName" disabled placeholder="根据记账账号自动回显" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="账名登录" prop="accountNameLogin">
              <el-select v-model="formData.accountNameLogin" placeholder="">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="业务拒绝码" prop="businessRejectCode">
              <el-input v-model="formData.businessRejectCode" placeholder="请输入业务拒绝码" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="业务拒绝原因" prop="businessRejectReason">
              <el-input v-model="formData.businessRejectReason" placeholder="请输入业务拒绝原因" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          <el-col :span="6">
            <el-form-item label="付款人身份" prop="payerIdentity">
              <el-select v-model="formData.payerIdentity" placeholder="请选择付款人身份" :popper-append-to-body="false">
                <el-option label="居民" value="1"></el-option>
                <el-option label="非居民" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款人性质" prop="payerNature">
              <el-select v-model="formData.payerNature" placeholder="请选择付款人性质">
                <el-option label="个人" value="1"></el-option>
                <el-option label="单位" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货物贸易交易" prop="goodsTradeTrans">
              <el-select v-model="formData.goodsTradeTrans" placeholder="请选择货物贸易交易">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row>
          <el-col :span="24">
            <el-form-item label="附言" prop="checkMemo">
              <el-input type="textarea" v-model="formData.checkMemo" placeholder="请输入附言" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <el-row>
      <el-col :span="3" :offset="22" class="menu-tree">
        <svg-icon icon-class="down_circle" className="menu-tool-btn" />
        <svg-icon icon-class="search-circle" className="menu-tool-btn" />
        <svg-icon icon-class="search-circle_1" className="menu-tool-btn" />
        <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%; margin-top: 0px" height="200px">
      <el-table-column prop="money" label="金额" align="center" sortable style="width: 25%"></el-table-column>
      <el-table-column
        prop="payerAmount"
        label="收款人账号"
        align="center"
        sortable
        style="width: 25%"
      ></el-table-column>
      <el-table-column prop="payerName" label="收款人名称" align="center" sortable style="width: 25%"></el-table-column>
      <el-table-column
        prop="leaveDeadline"
        label="剩余回执期限"
        align="center"
        sortable
        style="width: 25%"
      ></el-table-column>
    </el-table>

    <el-row>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
        ></el-pagination>
      </div>
    </el-row>

    <el-row slot="footer">
      <el-col :span="2" :offset="8">
        <el-button type="primary" @click="paySuccess">付款</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="danger" @click="reject">拒绝</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button @click="close">关闭</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: "paymentDetailDialog",
  data() {
    return {
      currentPage4: 1, // 分页
      title: "",
      openState: false, // 是否显示弹出层
      form: {},
      formData: {
        batchNumber: "99999999", // 批次序号
        messageIdentNum: "2014010100000001", // 报文标识号
        businessType: "1", // 业务类型
        initiatePart: "906100000017", // 发起参与机构
        initiatePartName: "北京集中代收付中心", // 发起参与机构名称
        initiateDirectPart: "906100000017", // 发起直接参与机构
        acceptPart: "561290000015", // 接收参与机构
        acceptPartName: "三菱东京日联银行上海分行", // 接收参与机构名称
        acceptDirectPart: "561290000015", // 接收直接参与机构
        payerAccount: "4392258396970031", // 付款人账号
        payerName: "付款人A", // 付款人名称
        payBankNum: "30929000001299", // 付款行行号
        payBankName: "兴业银行北京分行*590", // 付款行行名
        payLiqBankNum: "30939000001199", // 付款清算行行号
        AccLiqBankNum: "561290000015", // 收款清算行行号
        amountMoney: "CNY 9,999,999,99", // 总金额
        payeeNum: "88,888", // 收款人数目

        contractNum: "6325464713562562345", // 合同（协议）号
        unifyCreditCode: "CODE.563441235546236", // 统一社会信用代码
        transactionClass: "1", // 交易类别
        operateUser: "张三", // 操作用户
        reviewUser: "admin001", // 复核用户
        NPCProcesseStatus: "1", // NPC处理状态
        NPCProcesseDate: "2023-11-28", // NPC处理日期
        receiptDeadline: "10", // 回执期限
        statusUpdateTime: "2023-11-28 12:00:00", // 状态更新时间
        leaveReceiptDeadline: "09", // 剩余回执期限
        transpondPayDate: "2023-11-28", // 转发付款方日期
        printStatus: "已打印", // 打印状态
        checkMark: "已核验", // 校验标识
        accountNum: "", // 记账账号
        accountName: "", // 记账名称
        accountNameLogin: "1", // 账名登录
        customerReferenceNu: "32531241325245", // 客户参考号

        businessRejectCode: "", // 拒绝码
        checkMemo: "", // 附言
        businessRejectReason: "", // 拒绝原因

        // BOP信息
        payerIdentity: "", // 付款人身份
        payerNature: "", // 付款人性质
        goodsTradeTrans: "", // 货物贸易交易
      },
      rules: {},
      tableData: [
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
        {
          money: "100,000,000",
          payerAmount: "254789-00001",
          payerName: "A公司",
          leaveDeadline: "02天",
        },
      ],
    };
  },

  methods: {
    handleClose() {
      this.openState = false;
    },

    show() {
      this.title = "小额批量代付业务付款明细";
      this.openState = true;
    },

    // 拒绝
    reject() {
      console.log("拒绝");
    },

    // 付款
    paySuccess() {
      console.log("付款");
    },

    // 关闭
    close() {
      console.log("关闭");
      this.openState = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000 !important;
}
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -5px;
  margin-left: 92%;
  font-size: 28px;
}
.block {
  float: right;
  margin-top: 10px;
}
</style>
